<template>
  <q-dialog seamless v-model="visible" position="top">
    <div class="q-pa-sm blur">
      <div class="flex justify-center q-gutter-sm">
        <q-btn
          class="text-bold"
          label="完成"
          color="secondary"
          @click="achieve"
        />
        <q-btn
          class="text-bold"
          :label="isLocation ? '当前模式：创建点位' : '当前模式：修改方向'"
          color="secondary"
          :icon-right="isLocation ? 'replay' : 'shuffle'"
          @click="changeMode()"
        />
        <q-btn class="text-bold" label="退出" color="secondary" @click="exit" />
      </div>
      <div class="text-bold text-h6 q-ma-md text-center">
        双击地图{{ isLocation ? "创建导航点" : "修改导航点方向" }}
      </div>
    </div>
  </q-dialog>
</template>

<script>
import { ref, inject, watch } from "vue";
import { useQuasar } from "quasar";
import { api } from "boot/axios";
import { useAPIStore } from "stores/api";

export default {
  name: "AddPose",
  setup(props, context) {
    const $q = useQuasar();
    const visible = ref(false);
    const pixiMap = inject("pixiMap");
    const mapId = inject("mapId");
    const pointList = inject("pointList");
    const loadPoints = inject("loadPoints");
    const isLocation = ref(true);
    const mapUrl = useAPIStore().mapUrl;
    const List = ref([]);
    // 点的临时信息
    const tempPose = ref({
      name: "",
      mapID: "",
      pose: {
        position: { x: 0, y: 0, z: 0 },
        orientation: { x: 0, y: 0, z: 0, w: 1 },
      },
    });

    watch(visible, (value) => {
      if (value) {
        isLocation.value = true;
      }
    });

    // 保存点位
    function achieve() {
      pixiMap.pointOpen = false;
      visible.value = false;
      api
        .put(mapUrl + "mapPose/ros/" + mapId.value, List.value)
        .then(() => {
          loadPoints();
          visible.value = false;
          context.emit("update");
        })
        .catch((err) => {
          console.error(err);
          $q.notify({ message: "保存失败", type: "negative" });
        });
    }

    function show() {
      $q.notify({ message: "开始创建点位", type: "positive" });
      tempPose.value.mapID = mapId.value;
      pixiMap.pointOpen = true;
      visible.value = true;
      // 获取点击当前点位精灵
      pixiMap.creationPoint = (pos) => {
        // 只能创建一个点位，深拷贝
        List.value = JSON.parse(JSON.stringify(pointList.value));
        if (isLocation.value) {
          tempPose.value.pose.position.x = pos.x;
          tempPose.value.pose.position.y = pos.y;
        } else {
          const theta = Math.atan2(
            pos.y - tempPose.value.pose.position.y,
            pos.x - tempPose.value.pose.position.x
          );
          tempPose.value.pose.orientation.z = Math.sin(theta / 2);
          tempPose.value.pose.orientation.w = Math.cos(theta / 2);
        }
        // 点位名称
        tempPose.value.name = "点位" + (pointList.value.length + 1);
        List.value.push(tempPose.value);
        // 画点
        pixiMap.drawRail(List.value);
      };
    }

    function changeMode() {
      isLocation.value = !isLocation.value;
    }

    return {
      visible,
      show,
      achieve,
      exit() {
        visible.value = false;
        pixiMap.pointOpen = false;
        pixiMap.drawRail(pointList.value);
        context.emit("update");
      },
      isLocation,
      changeMode,
    };
  },
};
</script>

<style scoped></style>
